<template>
  <el-date-picker
    style="width: 100%"
    clearable
    v-model="comValue"
    :type="props.type"
    :disabled="disabled"
    placeholder="请选择"
    :disabled-date="disabledDate"
    :value-format="props.valueFormat"
  />
</template>
<script setup>
import dayjs from 'dayjs'
import { useVModel } from '@vueuse/core'
const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD'
  },
  modelValue: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'date'
  },
  disabledDate: {
    type: Function,
    default: () => false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const comValue = useVModel(props, 'modelValue', emit)
watch(
  () => comValue.value,
  val => {
    comValue.value = val
    emit('update:modelValue',val)
  }
)
// const comValue = computed({
//   get(val) {
//     console.log('props.modelValue',props.modelValue);
//     return props.modelValue
//   },
//   set(val) {
//     console.log('val',val);
//     if (val) {
//       emit('update:modelValue', val)
//     }else{
//       emit('update:modelValue', '')
//     }
//   }
// })
</script>
<style lang="scss" scoped></style>
